<template>
  <div class="freight-manage-page">
    <el-card class="card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="addTemplate">新增模板</el-button>
      </div>
      <div>
        <el-table :data="list">
          <el-table-column
            label="模板类型"
          >
            <template #default="{ row }">
              <!-- 模板类型：1-同城寄，2-省内寄，3-经济区互寄，4-跨省 -->
              <span v-if="row.templateType === 1">同城寄</span>
              <span v-else-if="row.templateType === 2">省内寄</span>
              <span v-else-if="row.templateType === 3">经济区互寄</span>
              <span v-else>跨省</span>
            </template>
          </el-table-column>
          <el-table-column
            label="运送类型"
          >
            <!-- 运送类型：1-普快，2-特快 -->
            <template #default="{ row }">
              <span v-if="row.transportType === 1">普快</span>
              <span v-else-if="row.transportType === 2">特快</span>
            </template>
          </el-table-column>
          <el-table-column
            label="关联城市"
          >
            <!-- 关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽 -->
            <template #default="{ row }">
              <span>{{ getAssociatedCityText(row.associatedCityList) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
          />
          <el-table-column
            prop="continuousWeight"
            label="续重"
          />
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
          />
          <el-table-column
            label="操作"
          >
            <template #default="{ row }">
              <el-button style="color: #419eff;" type="text" @click="editTemplate(row)">编辑</el-button>
              <el-button type="text" @click="deleteTemplate(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 新增、编辑运费弹窗 -->
    <freight-dialog ref="freightDialog" :title="title" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { getCarriagesList, deleteCarriages } from '@/api/carriages'
import FreightDialog from '@/views/basicData/transit/freight-manage/components/freight-dialog.vue'
import { getAssociatedCityText } from '@/utils/freight-data'

export default {
  components: {
    FreightDialog
  },
  data() {
    return {
    // 表格数据
      list: [],
      title: '新增模板',
      showDialog: false
    }
  },
  created() {
    this.getCarriagesList()
  },
  methods: {
    getAssociatedCityText,
    // 获取运费模板列表
    async getCarriagesList() {
      const result = await getCarriagesList()
      console.log(result)
      this.list = result.data
    },
    // 添加模板
    addTemplate() {
      this.title = '新增模板'
      this.showDialog = true
    },
    // 编辑模板
    editTemplate(row) {
      this.title = '编辑模板'
      this.$nextTick(() => {
        this.$refs.freightDialog.switchEditMode(row)
      })
      this.showDialog = true
    },
    // 删除模板
    deleteTemplate(id) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const result = await deleteCarriages(id)
        console.log(result)
        // 刷新列表
        this.getCarriagesList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((e) => {
        console.log('用户取消删除', e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.freight-manage-page {
  padding: 20px 20px 20px 0;
}
</style>
